<template>
  <el-dialog append-to-body
             :close-on-click-modal="false"
             :title="`任务详情：${datasource?.taskType?.name || '--'}`"
             :visible.sync="syncVisible"
             width="800px"
             @close="doCancel"
             @open="doOpen"
             v-el-drag-dialog>
    <div v-loading="loading">
      <el-tabs style="height:500px"
               tab-position="left">
        <el-tab-pane class="h-100 px-1"
                     label="基础信息"
                     lazy>
          <el-descriptions class="p-3"
                           :column="1"
                           direction="vertical"
                           size="medium">
            <el-descriptions-item label="任务ID">{{ datasource.id || "--" }}</el-descriptions-item>
            <el-descriptions-item label="任务状态">
              <el-tag v-if="datasource.status === 0"
                      type="info">未开始</el-tag>
              <el-tag v-else-if="datasource.status === 1"
                      type="warning">已暂停</el-tag>
              <el-tag v-else-if="datasource.status === 2"
                      type="info">待执行</el-tag>
              <el-tag v-else-if="datasource.status === 3"
                      type="success">执行中</el-tag>
              <el-tag v-else-if="datasource.status === 4"
                      type="danger">异常</el-tag>
              <el-tag v-else-if="datasource.status === 0xfe"
                      type="danger">已中止</el-tag>
              <el-tag v-else-if="datasource.status === 0xff">已完成</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="创建时间">{{ datasource.createTime | formatTime }}</el-descriptions-item>
            <el-descriptions-item label="完成时间">
              <span v-if="datasource.complete">{{ datasource.completeTime | formatTime }}</span>
              <span>--</span>
            </el-descriptions-item>
            <el-descriptions-item label="任务进度">{{ datasource.percentage || "--" }}% </el-descriptions-item>
            <el-descriptions-item label="任务描述">{{ datasource.description || "--" }} </el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>
        <el-tab-pane v-for="item in datasource?.taskType?.taskExtTables"
                     :key="`tab-${item.id}`"
                     class="h-100 px-1"
                     :label="item.extDisplayName"
                     lazy>
          <task-ext-table-info-block v-if="item.isExtDetail"
                                     :columns="item.taskExtTableColumns"
                                     :data-id="datasource.id"
                                     :ext-id="item.id"></task-ext-table-info-block>
          <task-ext-info-block v-else
                               :columns="item.taskExtTableColumns"
                               :data-id="datasource.id"
                               :ext-id="item.id"></task-ext-info-block>
        </el-tab-pane>
        <el-tab-pane class="h-100 px-1"
                     label="任务日志"
                     lazy>
          <task-logs-block :data-id="datasource.id"> </task-logs-block>
        </el-tab-pane>
      </el-tabs>
    </div>
    <template #footer>
      <div class="text-end">
        <el-button type="default"
                   @click.stop="doCancel">
          <ju-icon class="me-1"
                   icon="arrow-return-left"
                   svg-icon />关闭
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts">
  import DialogMixins from "@/mixins/DialogMixins";
  import { Component, Mixins, Prop } from "@some21/vue-class-decorator";
  import { cloneDeep } from "lodash";
  import { getTaskInfo } from "../../../apis/Layout";

  const DEF_TASKINFO = {
    id: "",
    completeTime: null,
    createTime: null,
    description: "",
    isCompleted: false,
    name: "",
    percentage: 0,
    status: 0,
    taskType: {
      id: -1,
      name: "",
      taskExtTables: [
        {
          id: -1,
          isExtDetail: false,
          extDisplayName: "",
          extTableName: "",
          taskType: 1,
        },
      ],
    },
  };

  @Component({
    name: "DialogModifyPwd",
    components: {
      TaskExtInfoBlock: () => import("./TaskExtInfoBlock.vue"),
      TaskExtTableInfoBlock: () => import("./TaskExtTableInfoBlock.vue"),
      TaskLogsBlock: () => import("./TaskLogsBlock.vue"),
    },
  })
  export default class extends Mixins(DialogMixins) {
    @Prop({ required: true })
    dataId: any;

    loading = true;
    datasource = cloneDeep(DEF_TASKINFO);

    doOpen() {
      this.loadData();
    }
    async loadData() {
      this.loading = true;
      const { data } = await getTaskInfo(this.dataId);
      this.datasource = data;
      this.loading = false;
    }
    doCancel() {
      this.syncVisible = false;
    }
  }
</script>

<style lang="scss" scoped>
  .el-tabs {
    :deep(.el-tabs__content) {
      height: 100%;
    }
  }
</style>
